<!--
 * @Author: zheguo 3188606474@qq.com
 * @Date: 2024-04-20 19:54:01
 * @LastEditors: zheguo 3188606474@qq.com
 * @LastEditTime: 2024-04-24 22:46:56
 * @FilePath: \projectOne\myapp\src\views\xiaomiAdmin.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="content">
        <div class="content_logo">
            <div class="content_img">
                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi.com-assets/shop/img/logo-mi2.png" alt=""
                    style="width: 70px;height: 70px;">
            </div>
            <div>
                <h1>欢迎来到小米管理员界面</h1>
            </div>
        </div>

        <div class="content_bottom">
            <div class="navbar_left">
                <ul>
                    <li v-for="(data, index) in list" :key="data"> <el-button type="primary"
                            @click="handleChange(index)">{{ data
                            }}</el-button></li>
                </ul>
            </div>
            <div class="change_content">
                <FormDialog v-if="countIndex == 0"></FormDialog>
                <FormEcharts v-if="countIndex == 1"></FormEcharts>
                <Changeadmin v-if="countIndex == 4"></Changeadmin>
                <adminData v-if="countIndex == 2"></adminData>
            </div>
        </div>


    </div>
</template>

<script setup>
import FormDialog from '../components/admin/form_dialog.vue'
import FormEcharts from '../components/admin/form_echarts.vue'
import Changeadmin from '../components/admin/change_admin.vue'
import adminData from '../components/admin/admin_data.vue'
import { onBeforeRouteLeave } from 'vue-router';
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import Hidden from '../utils/hidden'
const list = ref(['用户数据', '用户统计', '管理员数据', '设置', '增加权限', '退出'])
const router = useRouter()
const countIndex = ref(0)
// 隐藏导航栏
Hidden();

const handleChange = (index) => {
    countIndex.value = index

    if (index == 5) {
        router.push(`/shop/list`)
    }
}
onBeforeRouteLeave((to, form) => {
    localStorage.removeItem("token")
})

</script>
<style lang="scss" scoped>
.content {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    flex-direction: column;
    overflow: hidden;

    .content_logo {
        width: 100%;
        height: 80px;
        background: white;
        display: flex;
        align-items: center;

        img {
            margin-left: 10px;
        }

        h1 {
            margin-left: 20px;
        }
    }

    .content_bottom {
        width: 100vw;
        height: 100%;

        .navbar_left {
            width: 100%;
            height: 40px;
            background: white;

            ul {
                display: flex;
                list-style: none;

                li {
                    width: auto;
                    height: 40px;
                    line-height: 40px;
                    margin-left: 20px;
                }
            }
        }

    }

}
</style>